<template>
	<div class="role" v-if="dialogFormVisible">
		<el-dialog :title="title" :visible="dialogFormVisible" :close-on-click-modal="false" width="1000px" :before-close="handleClose">
			<div class="tab">
				<el-form ref="form" :rules="rules" :model="form" label-width="100px">
					<div style="margin: 10px 0">
						<el-card class="box-card">
							<div slot="header" class="clearfix">
								<span>送测产品信息</span>
							</div>
							<div>
								<el-form-item label="产品名称:" prop="product_name">
									<el-input v-model="form.product_name" clearable placeholder="请输入产品名称"></el-input>
								</el-form-item>
								<el-form-item label="Model:" prop="model">
									<el-input v-model="form.model" clearable placeholder="请输入Model"></el-input>
								</el-form-item>
								<el-form-item label="提测类型:">
									<el-select v-model="form.test_type" style="width: 100%;" clearable placeholder="请选择提测类型">
										<el-option label="新品" value="新品"></el-option>
										<el-option label="迭代" value="迭代"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="提测服务器:">
									<el-select v-model="form.servers" style="width: 100%;" multiple clearable placeholder="请选择提测服务器">
										<el-option
											v-for="(item,index) in serverOptions"
											:key="index"
											:label="item.name"
											:value="item.name">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="签署方式:">
									<el-radio-group v-model="form.sign_type" @change="signChange">
										<el-radio label="alone">单独</el-radio>
										<el-radio label="before">根据</el-radio>
									</el-radio-group>
								</el-form-item>
								<el-form-item label="签署日期:">
									<el-date-picker
										:disabled="dataShow"
										v-model="form.sign_date"
										type="date"
										style="width: 100%;"
										placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
							</div>
						</el-card>
					</div>

					<div style="display: flex">
						<div class="item" style="width: 49%;margin-right: 2%">
							<el-card class="box-card">
								<div slot="header" class="clearfix">
									<span>客户信息</span>
								</div>
								<div >
									<el-form ref="customer" :rules="customerRules" :model="customer" label-width="100px">
										<el-form-item label="客户名称:" prop="customer_name">
											<el-select v-model="customer.customer_name" clearable filterable
													   allow-create
													   default-first-option
													   style="width: 100%;"
													   @change="customerChange"
													   placeholder="请选择客户">
												<el-option
													v-for="(item,index) in customer_list"
													:key="index"
													:label="item.name"
													:value="item.id">
												</el-option>
											</el-select>
										</el-form-item>
										<el-form-item label="联系人:" prop="user_name">
											<el-input v-model="customer.user_name" clearable placeholder="请输入联系人"></el-input>
										</el-form-item>
										<el-form-item label="电话:" prop="mobile">
											<el-input v-model="customer.mobile" clearable placeholder="请输入电话"></el-input>
										</el-form-item>
										<el-form-item label="E-mail:" prop="email">
											<el-input v-model="customer.email" clearable placeholder="请输入E-mail"></el-input>
										</el-form-item>
									</el-form>
								</div>
							</el-card>
						</div>
						<div class="item" style="width: 49%;">
							<el-card class="box-card">
								<div slot="header" class="clearfix">
									<span>实验室信息</span>
								</div>
								<div>
									<el-form ref="laboratory" :rules="laboratoryRules" :model="laboratory" label-width="100px">
										<el-form-item label="地址:" prop="addr">
											<el-input v-model="laboratory.addr" clearable placeholder="请输入地址"></el-input>
										</el-form-item>
										<el-form-item label="报价人:" prop="name">
											<el-input v-model="laboratory.name" clearable placeholder="请输入报价人"></el-input>
										</el-form-item>
										<el-form-item label="电话:" prop="mobile">
											<el-input v-model="laboratory.mobile" clearable placeholder="请输入电话"></el-input>
										</el-form-item>
										<el-form-item label="E-mail:" prop="email">
											<el-input v-model="laboratory.email" clearable placeholder="请输入E-mail"></el-input>
										</el-form-item>
									</el-form>
								</div>
							</el-card>
						</div>
					</div>

				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="add('form')">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>

import { manufactorList,getInfo, quotationPost } from '@/api/user'
import moment from "moment";

export default {
	name: 'addForm',
	data(){
		return {
			title:'新增',
			dialogFormVisible:false,
			rules:{
				product_name:[
					{max: 36, message: '产品名称不能超过36个字符', trigger: 'blur'},
					{ required: true, message: '请输入产品名称', trigger: 'blur' }
					],
				model:[
					{max: 36, message: 'Model不能超过36个字符', trigger: 'blur'},
					{required: true, message: '请输入Model', trigger: 'blur'}
				]
			},
			customerRules:{
				customer_name:{ required: true, message: '请选择客户', trigger: 'blur' },
				user_name:{ required: true, message: '请输入联系人', trigger: 'blur' },
				mobile: [
					{ required: true, message: '手机号不能为空' },
					{ type: 'number',
						message: '手机号格式不正确',
						trigger: 'blur',
						transform (value) {
							var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
							if (!phonereg.test(value)) {
								return false
							}else{
								return Number(value)
							}
						}
					}
				],
				email: [
					{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
					{
						type: 'email',
						message: '请输入正确的邮箱地址'
					},
				],
			},
			laboratoryRules:{
				addr:{ required: true, message: '请输入地址', trigger: 'blur' },
				name:{ required: true, message: '请输入报价人', trigger: 'blur' },
				mobile: [
					{ required: true, message: '手机号不能为空' },
					{ type: 'number',
						message: '手机号格式不正确',
						trigger: 'blur',
						transform (value) {
							var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
							if (!phonereg.test(value)) {
								return false
							}else{
								return Number(value)
							}
						}
					}
				],
				email: [
					{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
					{
						type: 'email',
						message: '请输入正确的邮箱地址'
					},
				],
			},
			form:{
				sign_date:''
			},
			// laboratory:{},
			// customer:{},
			laboratory:{
				addr:'',
				name:'',
				mobile:'',
				email:''
			},
			customer:{
				user_name:'',
				mobile:'',
				customer_name:'',
				email:''
			},
			//选中的从表数据
			customer_list: [],
			btnvalid:false,
			serverOptions:[    // 提测服务器选项
				{name:'大陆'},
				{name:'新加坡'},
				{name:'美国'},
				{name:'印度'},
				{name:'俄罗斯'},
				{name:'欧洲'}
			],
			dataShow:true,   // 禁用签署日期
		}
	},
	created() {

	},
	methods:{
		// 签署方式
		signChange(e){
			if(e == 'before'){
				this.dataShow = false
			}else {
				this.dataShow = true
				this.form.sign_date = ''
			}
		},
		customerChange(data){
			if(data != ''){
				this.customer_list.filter(item => {
					if(item.id == data){
						this.customer.customer_name = item.name
						this.customer.costomer_id = item.id
					}
				})
			}else {
				this.customer = {}
			}

		},
		add(form){
			this.$refs[form].validate((valid) => {
				if(valid){
					this.btnvalid = true
				}else {
					this.btnvalid = false
				}
			})
			this.$refs.laboratory.validate((valid) => {
				if(valid){
					this.btnvalid = true
				}else {
					this.btnvalid = false
				}
			})
			this.$refs.customer.validate((valid) => {
				if(valid){
					this.btnvalid = true
				}else {
					this.btnvalid = false
				}
			})
			var data = {
				customer_json:this.customer || '',
				laboratory_json:this.laboratory || '',
				product_name:this.form.product_name || '',
				model:this.form.model || '',
				test_type:this.form.test_type || '',
				servers:this.form.servers || '',
				sign_type:this.form.sign_type || ''
			}

			if(this.form.sign_date != ''){
				data.sign_date = moment(this.form.sign_date).format('YYYY-MM-DD HH:mm:ss')
			}

			if(this.btnvalid){
				quotationPost(data).then(res => {
					if(res.status == 'success'){
						this.dialogFormVisible = false
						this.$message.success(res.message)
						this.$parent.initTable()
						this.$router.push(`/quotationDetail/${res.data}`)
					}else {
						this.$message.error('新增失败!')
					}
					this.dialogFormVisible = false
					this.form = {}
					this.laboratory = {
						addr:'',
						name:'',
						mobile:'',
						email:''
					}
					this.customer = {
						user_name:'',
						mobile:'',
						customer_name:'',
						email:''
					}
				})
			}

		},
		handleClose(){
			this.dialogFormVisible = false
			this.form = {}
			this.laboratory = {
				addr:'',
				name:'',
				mobile:'',
				email:''
			}
			this.customer = {
				user_name:'',
				mobile:'',
				customer_name:'',
				email:''
			}
		},
		initData(data){
			getInfo().then(res => {
				this.laboratory.addr = '北京市海淀区清华东路9号院3号楼创达大厦，100083'
				this.laboratory.name = res.data.name
				this.laboratory.email = res.data.email
				this.laboratory.mobile = res.data.phone
			})
			manufactorList().then(res => {
				this.customer_list = res.data
			})
		}
	}

}
</script>

<style lang="scss" scoped>
.role{
	//.tab{
	//	width: 450px;
	//	margin: 0 0 0 40px;
	//}
}
</style>
